<template>
    <div class="homeLayout">
        <!-- 标题 -->
<!--        <Title>-->
<!--            <template #default>{{ title }}</template>-->
<!--        </Title>-->
        <!-- 内容区 -->
        <section class="contentLayout">
            <!-- 上方用户注册数等 -->
            <div>
                <el-row :gutter="16" class="topData">
                    <el-col :xs="24" :sm="8">
                        <infoNumber :infoNum="userNumber">
                            <template #title>用户注册数</template>
                        </infoNumber>
                    </el-col>
                    <el-col :xs="24" :sm="8">
                        <infoNumber :infoNum="jobCreateNumber">
                            <template #title>职位发布数</template>
                        </infoNumber>
                    </el-col>
                    <el-col :xs="24" :sm="8">
                        <infoNumber :infoNum="jobAppliedNumber">
                            <template #title>职位投递数</template>
                        </infoNumber>
                    </el-col>
                </el-row>
            </div>
            <!-- 下方分行浏览数柱状图 -->
            <div class="companyLayout">
                <div class="titleName">分行浏览数柱状图</div>
                <div class="chart" id="echart" ref="echart"></div>
            </div>
        </section>
    </div>
</template>
    
<script setup>
// import * as echarts from "echarts";
// import * as echarts from "e"
import InfoNumber from "@/views/Home/Number.vue";
import { useRoute } from "vue-router";
import {
    getUserRegister,
    getJobCreated,
    getJobApplied,
    getCompanyBrowsed,
} from "/src/network/home.js";
import { onMounted, ref, watch } from "vue";
const route = useRoute();
const title = route.meta.title;
const userNumber = ref({});
const jobCreateNumber = ref({});
const jobAppliedNumber = ref({});
const CompanyBrowsedNumber = ref({});
function initChart() {

    // 创建观察对象
    const resizeObserver = new ResizeObserver((entries) => {
        window.onresize = myChart.resize;
    });
    // 指定要观察的dom
    const test = document.getElementById("echart");
    if (test) {
        setTimeout(() => {
            resizeObserver.observe(test);
        }, 100);
    }
onMounted(() => {
    userRegister();
    JobCreated();
    JobApplied();
    CompanyBrowsed();
});

//获取数据 统计-用户注册
const userRegister = async () => {
    await getUserRegister().then((res) => {
        // console.log(res);
        userNumber.value = res.data.data;
    });
};

// 获取 统计-发布职位 getJobCreated
const JobCreated = async () => {
    await getJobCreated().then((res) => {
        // console.log(res);
        jobCreateNumber.value = res.data.data;
    });
};

// 获取 统计-投递职位
const JobApplied = async () => {
    await getJobApplied().then((res) => {
        // console.log(res);
        jobAppliedNumber.value = res.data.data;
    });
};

// 获取 统计-公司浏览数
const CompanyBrowsed = async () => {
    await getCompanyBrowsed().then((res) => {
        console.log(res);
        CompanyBrowsedNumber.value = res.data.data;
        console.log(CompanyBrowsedNumber.value);
    });
};}
</script>
    
<style lang="scss" scoped>
.homeLayout {
    .contentLayout {
        background: transparent !important;
        .companyLayout {
            margin-top: 16px;
            background: #fff;
            border: 1px solid var(--border-color-tint);
            .titleName {
                padding: 16px 24px;
                border-bottom: 1px solid var(--border-color-tint);
            }
            .chart {
                width: 100%;
                min-height: 400px;
                height: 100%;
            }
        }
    }
}
</style>